/* 个人信息页面 */
<template>
  <div class="app-container">
    <!-- 左侧用户个人信息资料 -->
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <!-- 个人信息用户图片 -->
            <div class="text-center">
              <img src="../../assets/images/login-dog.jpg" />
            </div>
            <!-- 个人信息中li标签内容 -->
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconyonghu" /></svg
                >用户名称
                <div class="pull-right">{{ user.username }}</div>
              </li>

              <li class="list-group-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconxiugai" /></svg
                >手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>

              <li class="list-group-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icondaohang" /></svg
                >用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>

              <li class="list-group-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhiyuquanxian" /></svg
                >所属部门
                <div class="pull-right">研发部门 / 董事长</div>
              </li>

              <li class="list-group-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconadmin" /></svg
                >所属角色
                <div class="pull-right">{{ user.role }}</div>
              </li>

              <li class="list-group-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconyuangongkaoqintongji" /></svg
                >创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧基本资料卡片布局 -->
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :user="user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userInfo from "@/components/userInfo"; /* 引入userInfo组件 */
import resetPwd from "@/components/resetPwd"; /* 引入重置密码组件 */
import { getUserInfo } from "@/api/user"; /* 引入后端获得用户信息api接口 */

export default {
  name: "Profile",
  components: { userInfo, resetPwd },
  data() {
    return {
      user: {},
      activeTab: "userinfo",
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    queryUserInfo() {
      const info = window.getItem("user", user); //获得当前用户信息
    },

    getUser() {
      getUserInfo().then((response) => {
        this.user = response.data;
      });
    },
  },
};
</script>

<style Lang="less" scoped>
/* 清除ul li中的小圆点 */
ul li {
  list-style: none;
}

/* 设置每一个li标签内的样式 */
.list-group-item {
  border-bottom: 1px solid #e7eaec; /* 定义下划线 */
  border-top: 1px solid #e7eaec; /* 定义上划线 */
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 14px;
}
/* 对于.list-group-striped下的二级标签起作用*/
.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 设置个人中心信息，将数据显示在右侧，优先级最高 */
.pull-right {
  float: right !important;
  color: #606266;
}

/* 设置svg图片，需要在main.js文件中导入svg */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* 设置图片区域父div样式 */
.text-center {
  text-align: center;
  box-sizing: inherit;
}
/* 设置图片区域样式  */
.text-center img {
  position: relative; /* absolute:不占用位置  relative：占用位置 */
  display: inline-block; /* 转为行行块式 */
  height: 100px;
  padding-bottom: 10px;
  border-radius: 50%; /* 设置div为圆角 */
}
</style>